<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户管理</title>
  <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>
</head>
<body>
<div id="app">
  <!--搜索表单-->
  <el-form :inline="true" :model="User" class="demo-form-inline">
    <el-form-item label="用户类型">
      <el-select v-model="User.role" placeholder="用户类型">
        <el-option label="访客" value="visitors"></el-option>
        <el-option label="管理员" value="admin"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="用户ID">
      <el-input v-model="User.userId" placeholder="用户ID"></el-input>
    </el-form-item>
    <el-form-item label="用户名">
      <el-input v-model="User.username" placeholder="用户名"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <!--按钮-->
  <el-row>
    <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
    <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
  </el-row>
  <!--添加数据对话框表单-->
  <el-dialog title="新增用户" :visible.sync="dialogVisible" width="30%">
    <el-form ref="form" :model="User" label-width="80px">
      <el-form-item label="用户ID">
        <el-input v-model="User.userId"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="User.username"></el-input>
      </el-form-item>
      <el-form-item label="用户密码">
        <el-input v-model="User.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="用户类型">
        <el-select v-model="User.role" placeholder="用户类型">
          <el-option label="访客" value="visitors"></el-option>
          <el-option label="管理员" value="admin"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addBrand">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--表格-->
  <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column type="index" width="50"></el-table-column>
    <el-table-column prop="userId" label="用户ID" align="center"></el-table-column>
    <el-table-column prop="username" label="用户名" align="center"></el-table-column>
    <el-table-column prop="password" label="密码" align="center"></el-table-column>
    <el-table-column prop="role" label="用户类型" align="center"></el-table-column>
    <el-table-column align="center" label="操作">
      <el-row>
        <el-button type="primary" @click="editUser">修改</el-button>
        <el-button type="danger" @click="deleteUser">删除</el-button>
      </el-row>
    </el-table-column>
  </el-table>

  <!--分页工具条-->
  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
  </el-pagination>
</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        pageSize: 5,
        totalCount: 100,
        currentPage: 1,
        dialogVisible: false,
        User: {
          userId: '',
          username: '',
          password: '',
          role: ""
        },
        selectedIds: [],
        multipleSelection: [],
        tableData: []
      };
    },
    mounted() {
      this.selectAll();
    },
    methods: {
      selectAll() {
        axios.post(`http://localhost:8080/javaweb_project/user/selectByPageAndCondition?currentPage=${this.currentPage}&pageSize=${this.pageSize}`, this.User)
                .then(resp => {
                  this.tableData = resp.data.rows;
                  this.totalCount = resp.data.totalCount;
                });
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      onSubmit() {
        this.selectAll();
      },
      addBrand() {
        axios.post("http://localhost:8080/javaweb_project/user/add", this.User,{
          headers: {
            'Content-Type': 'application/json'
          }
        })
                .then(resp => {
                  if (resp.data === "success") {
                    this.dialogVisible = false;
                    this.selectAll();
                    this.$message({
                      message: '恭喜你，添加成功',
                      type: 'success'
                    });
                  }
                });
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.selectAll();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.selectAll();
      },
      deleteByIds() {
        this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //用户点击确认按钮
          this.selectedIds = this.multipleSelection.filter(item => item.id !== undefined && item.id !== null).map(item => item.id);

          axios.post("http://localhost:8080/javaweb_project/user/deleteByIds", this.selectedIds,{
            headers: {
              'Content-Type': 'application/json'
            }
          })
                  .then(resp => {
                    if (resp.data === "success") {
                      this.selectAll();
                      this.$message({
                        message: '恭喜你，删除成功',
                        type: 'success'
                      });
                    }
                  });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      editUser() {
        // Implement edit user logic
      },
      deleteUser() {
        // Implement delete user logic
      }
    }
  });
</script>
</body>
</html>